<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Markdown Note</title>
    <link href="styles/sidepanel.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <!-- 左侧文件树 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>Notes</h2>
                <div class="sidebar-actions">
                    <button id="newFolderBtn" class="icon-button" title="New Folder">
                        <span class="mdi mdi-folder-plus"></span>
                    </button>
                    <button id="newNoteBtn" class="icon-button" title="New Note">
                        <span class="mdi mdi-note-plus"></span>
                    </button>
                </div>
            </div>
            <div id="fileTree" class="file-tree"></div>
        </div>

        <!-- 右侧内容区 -->
        <div class="content">
            <!-- 顶部工具栏 -->
            <div class="toolbar">
                <div class="toolbar-left">
                    <input type="text" id="noteTitle" class="note-title" placeholder="Note title...">
                </div>
                <div class="toolbar-right">
                    <button id="previewToggleBtn" class="icon-button" title="Toggle Preview">
                        <span class="mdi mdi-eye"></span>
                    </button>
                    <button id="saveBtn" class="icon-button" title="Save">
                        <span class="mdi mdi-content-save"></span>
                    </button>
                    <button id="exportBtn" class="icon-button" title="Export">
                        <span class="mdi mdi-download"></span>
                    </button>
                    <button id="importBtn" class="icon-button" title="Import">
                        <span class="mdi mdi-upload"></span>
                    </button>
                </div>
            </div>

            <!-- 编辑器容器 -->
            <div class="editor-container">
                <div id="editor"></div>
                <div class="markdown-preview"></div>
            </div>
        </div>
    </div>

    <!-- 导入依赖 -->
    <script src="lib/marked/marked.min.js"></script>
    <script src="scripts/monaco-config.js"></script>
    <script src="lib/monaco-editor/min/vs/loader.js"></script>
    <script src="scripts/sidepanel.js"></script>
</body>
</html>
